<template>
<div id="iconList">
    <div class="iconItem" v-for="item in iconitem" :key="item.id">
        <div class="iconn">
            <span class="iconfont" :class="item.icons"></span>
        </div>
        {{item.title}}
    </div>
</div>
</template>

<script>
export default {
    name: "iconList",
    data() {
        return {
            iconitem: [{
                    id: 1,
                    icons: 'icon-icon',
                    title: '每日推荐'
                },
                {
                    id: 2,
                    icons: 'icon-24gl-playlistMusic',
                    title: '私人FM'
                },
                {
                    id: 3,
                    icons: 'icon-gedan',
                    title: '歌单'
                },
                {
                    id: 4,
                    icons: 'icon-paihangbang',
                    title: '排行榜'
                }
            ],
        }
    },
    created() {

    }
}
</script>

<style lang="less" scoped>
#iconList {
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    // margin-top: .3rem;
    padding-top: .1rem;
    border-bottom: .01rem solid #ccc;
    // box-shadow: 0 .01rem .01rem .01rem rgba(204, 204, 204, .9);

    height: 1.6rem;
    overflow: hidden;

    .iconItem {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        overflow: hidden;

        font-size: .25rem;

        .iconn {
            padding: .2rem;
            background-color: rgba(252, 34, 34, .3);
            border-radius: 50%;
        }

        .iconfont {
            &:nth-of-type(1) {
                color: red;
                font-weight: 500;
            }
        }
    }
}
</style>
